<% if channel.banner %>
    <div class="h-box">
        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>" alt="" />
    </div>

    <div class="h-box">
        <hr>
    </div>
<% end %>

<div class="pure-g h-box">
    <div class="pure-u-2-3">
        <div class="channel-profile">
            <img src="/ggpht<%= channel_profile_pic %>" alt="" />
            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
        </div>
    </div>
    <div class="pure-u-1-3">
        <h3 style="text-align:right">
            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
        </h3>
    </div>
</div>

<div class="h-box">
    <div id="descriptionWrapper">
        <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
    </div>
</div>

<div class="h-box">
    <% sub_count_text = number_to_short_text(channel.sub_count) %>
    <%= rendered "components/subscribe_widget" %>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1-2">
        <div class="pure-u-1 pure-md-1-3">
            <a href="<%= youtube_url %>"><%= translate(locale, "View channel on YouTube") %></a>
        </div>
        <div class="pure-u-1 pure-md-1-3">
            <a href="<%= redirect_url %>"><%= translate(locale, "Switch Invidious Instance") %></a>
        </div>

        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, selected_tab) %>
    </div>
    <div class="pure-u-1-2">
        <div class="pure-g" style="text-align:end">
            <% sort_options.each do |sort| %>
                <div class="pure-u-1 pure-md-1-3">
                    <% if sort_by == sort %>
                        <b><%= translate(locale, sort) %></b>
                    <% else %>
                        <a href="<%= relative_url %>?sort_by=<%= sort %>"><%= translate(locale, sort) %></a>
                    <% end %>
                </div>
            <% end %>
        </div>
    </div>
</div>
